<template>
  <div id="firstViewContainer">
    <swiper @change="handleChange" :indicator-dots="index != 2" indicator-color="pink" >
      <swiper-item>
        <img src="/static/images/firstView/1.jpg" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/firstView/2.png" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/firstView/3.png" alt="">
      </swiper-item>
    </swiper>
    <button class="btn"  @click="toIndex" v-if="index === 2" >开始体验</button>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      index:0
    }
  },
  methods:{
     handleChange(event){
        //更新index
       this.index=event.mp.detail.current;
     },
    toIndex(){

      wx.showModal({

        content: '请选择角色',
        showCancel: true,//是否显示取消按钮
        cancelText:"用户",//默认是“取消”
        cancelColor:'skyblue',//取消文字的颜色
        confirmText:"医生",//默认是“确定”
        confirmColor: 'skyblue',//确定文字的颜色
        success: function (res) {
          if (res.cancel) {
            //跳转去index页面
            wx.switchTab({
              url:'/pages/index/main'
            })
          } else {
            //点击确定
            wx.navigateTo({
              url:'/pages/login/main'
            })
          }
        },
      })

    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    #firstViewContainer
      position absolute
      margin 0px -5px 0px -5px
      width 100%
      height 100%
      swiper
        width 100%
        height 100%
        img
          width 100%
          height 100%
      .btn

        position absolute
        width 200px
        height 60px
        bottom 20px
        line-height 60px
        text-align center
        left 50%
        background rgba(255,255,255,0.5)
        border-radius 20px
        margin-left -100px
</style>
